* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(100deg, rgb(10, 174, 224), rgb(246, 247, 247));
}



.box {
    margin: 2.083rem;
    display: flex;
    min-height: 1000px;

    .left {
        flex: 6;

        .nav {
            display: flex;
            justify-content: space-evenly;
            margin-bottom: 2.083rem;

            button {
                width: 4.167rem;
                height: 2.083rem;
                background-color: rgb(15, 107, 206);
                color: #fff;
                border: 1px solid rgb(15, 107, 206);
                border-radius: 0.333rem;
            }

            input {
                width: 6.25rem;
                height: 2.083rem;
                border: 1px solid rgb(15, 107, 206);
                border-radius: 0.333rem;
            }
        }

        .focus {
            .table {
                border-collapse: collapse;
                // border: none;
                border: 1px #ccc solid;
                border-radius: 10px;

                thead {
                    background: linear-gradient(100deg, rgb(73, 129, 233), rgb(246, 247, 247));

                    th {
                        width: 14.583rem;
                        height: 2.083rem;
                        text-align: center;
                        border: solid #ccc 1px;
                    }
                }

                tbody {
                    td {
                        height: 2.083rem;
                        width: 14.583rem;
                        text-align: center;
                        border: solid #ccc 1px;
                    }
                }
            }
        }
    }

    .right {
        flex: 4;
        margin: 2.083rem 0 0 4.167rem;

        .top {
            width: 25rem;
            height: 16.667rem;
        }

        .bottom {
            width: 25rem;
            height: 16.667rem;
        }
    }
}